<template>
	<view class="body">
		<tabBar :tabBars="tabBars" :scrollItemstyle='"width:33%"' :tabIndex='secindex' @toIndex='toIndex'></tabBar>

		<!-- 好友列表 -->
		<view class="uni-tab-bar">
			<swiper :current="secindex" class="swiper-box" :style="{height:swiperHeight+'px'}" @change="changeIndex">
				<swiper-item class="swiper-item" v-for="(items,index1) in newsList" :key="index1">

					<scroll-view class="scroll-v list scroll-Y" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
						<template v-if="items.list.length > 0">
							<block v-for="(item,index) in items.list" :key="index">
								<view class="">
									<user-list :item='item' :index="index"></user-list>
								</view>
							</block>
							<loadMore :loadtext="items.loadtext"></loadMore>
						</template>
						<template v-else>
							<noThing></noThing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <block v-for='(item,index) in list' :key="index">
			<user-list :item='item' :index="index"></user-list>
		</block> -->

	</view>
</template>

<script>
	import tabBar from '../../components/tabbar/tabbar.vue'
	import userList from '../../components/user-list/user-list.vue'
	import loadMore from '../../components/common/load-more.vue'
	import noThing from '../../components/no-thing/no-thing.vue'

	export default {
		components: {
			tabBar,
			userList,
			loadMore,
			noThing
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(90);
				}
			})
		},
		data() {
			return {
				secindex:0,
				swiperHeight:500,
				tabBars: [{
						name: '互关',
						id: 'huguan',
						num: 10
					},
					{
						name: '关注',
						id: 'guanzhu',
						num: 20
					},
					{
						name: '粉丝',
						id: 'fensi',
						num: 30
					}
				],
				newsList:[
					{
						loadtext:'上拉加载更多',
						list:[
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "21",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
						]
					},
					{
						loadtext:'上拉加载更多',
						list:[
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
						]
					},
					{
						loadtext:'上拉加载更多',
						list:[
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称3",
								age: "22",
								sex: "0",
								isguanzhu: false
							},
						]
					}
				]
			}

		},
		// 监听自定义按钮点击事件
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateBack({
					delta: 1
				})
			}
		},

		methods: {
			toIndex(index){
				this.secindex = index
			},
		loadMore(index){
						
				if(this.newsList[index].loadtext !== '上拉加载更多'){return ;}
				this.newsList[index].loadtext = '加载中'
				console.log(this.newsList[index].loadtext)
				// this.newsList[index].loadtext = '没有更多'
				setTimeout(() => {
					let obj = {
								userpic: '../../static/demo/userpic/6.jpg',
								username: "昵称",
								age: "28",
								sex: "1",
								isguanzhu: false
							}
					this.newsList[index].list.push(obj)
					this.newsList[index].loadtext = '上拉加载更多'
				}, 1000);
					},
				changeIndex(e,index) {
					console.log( e.mp.detail.current)
					// this.$store.commit('changeIndex', e.mp.detail.current)
					console.log(index)
					this.secindex  =  e.mp.detail.current
				},
			},
			computed: {
				getIndex() {
					return this.$store.getters.getTabIndex
				}
			},
		}
</script>

<style scoped>

</style>
